<template>
    <div class="contact-us">
        <a class="contact-btn" href="javascript:;" @click="showContactUs">{{$t('order.btn1')}}</a>
        <el-dialog :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="contactForm">
                <el-form-item label="Feedback" prop="desc">
                    <el-input
                      type="textarea"
                      :rows="4"
                      placeholder="please enter your feedback"
                      v-model="form.contents">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">Cancel</el-button>
                <el-button type="primary" @click="goSubmit">Confirm</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { submitContactUs } from '@/api/c'
import Cookies from 'js-cookie'

    export default {
        name: 'ContactUs',
        props: {
           
        },
        data() {
        return {
            dialogFormVisible: false,
            rules: {
              contents: [
                { required: true, message: 'description is required', trigger: 'blur' }
              ]
            },
            form: {
              contents: ''
            }
        }
    },

    methods: {
        showContactUs() {
          if (Cookies.get('linses') && Cookies.get('uc')){
            this.dialogFormVisible = true
          } else {
            this.$router.push({path: '/member/login', query: {cbPath: this.$route.path}})
          }
        },
        goSubmit() {
           this.$refs['contactForm'].validate((valid) => {
            if (valid) {
                submitContactUs(this.form).then(response => {
                    this.dialogFormVisible = false
                    this.$notify({
                        title: 'Success',
                        message: 'We have received your request and we will reply via email shortly. ',
                        type: 'success',
                        duration: 3000
                    });
                    this.form = {contents: ''}
                })
            }
            })
        }
    }
    }
</script>

<style scoped>
   .contact-us {
    display: inline-block;
    padding-left: 18px;
   }
   .contact-btn {
    color: #3DBDB6;
   }
</style>
<style type="text/css">
  .contact-us .el-dialog__body {
    padding: 0 20px 30px 20px;
  }
</style>
